<template>
  <div class="nav">
    <div class="topper">
    <div class="touxiang"><img src="./pic/touxiang.jpeg" alt=""></div>
    <div>
      <span>鹿友 4632COK <van-icon name="arrow" style="font-size: 15px;"/></span>
      <span>183****0686</span>
    </div>
    <div>
      <van-icon @click="setclick" name="setting-o" style="font-size: 25px;"/>
    </div>
  </div>
  <div class="discont">
      <div class="ale">
        <span>0</span>
        <span>优惠券</span>
      </div>
      <div class="ale">
        <span>0</span>
        <span>红包</span>
      </div>
  </div>
  <div class="family">
    <van-cell title="家庭健康档案" icon="shop-o">
      <template #right-icon>
        <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
  </div>
  <div class="vaccine">
    <p>疫苗工具箱</p>
      <van-grid>
        <van-grid-item @click="appointment" icon="comment" text="疫苗预约" style="color: green;"/>
        <van-grid-item icon="printer" text="疫苗订单" style="color: green;"/>
        <van-grid-item icon="send-gift" text="缺苗登记" style="color: green;"/>
        <van-grid-item icon="smile-comment" text="疫苗订阅" style="color: green;"/>
        <van-grid-item icon="diamond" text="智能选苗" style="color: green;"/>
        <van-grid-item icon="cluster" text="肺炎风险评" style="color: green;"/>
        <van-grid-item icon="wechat-pay" text="接种问答" style="color: green;"/>
        <van-grid-item icon="bell" text="接种数据" style="color: green;"/>
      </van-grid>
  </div>
  <div class="health">
    <p>健康订单及服务</p>
    <van-cell title="问诊订单" icon="notes-o" left4-color='color:#1989fa'>
      <template #right-icon>
          <van-icon name="arrow" class="search-icon"/>
      </template>
    </van-cell>
    <van-cell title="已开处方" icon="records" >
      <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
    <van-cell title="关注医生" icon="user-o" @click="handlesp()">
      <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
    <van-cell title="核酸/体检" icon="service-o" >
      <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
    <van-cell title="购药订单" icon="shop-o" >
      <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
    <van-cell title="挂号就诊" icon="newspaper-o" >
      <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
  </div>

  <div class="tool">
    <p>常用工具</p>
    <van-cell title="专科专病" icon="completed" >
      <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
    <van-cell title="育儿百宝箱" icon="idcard" >
      <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
    <van-cell title="成长周刊" icon="tosend" >
      <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
    <van-cell title="我的权益" icon="shield-o" >
      <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
    <van-cell title="联系客服" icon="service-o" >
      <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
  </div>
  </div>
</template>


<script lang="ts" setup>

import { useRouter } from 'vue-router';
let router = useRouter()
// 跳转到设置界面
const setclick = function(){
  console.log('aa')
  router.push('./setting')
}
const handlesp = function(){
  console.log('aa')
  router.push('./concern')
}
// 跳转到疫苗预约界面
const appointment = function(){
    router.push('./appointment')
}
</script>

<style lang="less" scoped>
.nav{
  background-color: rgb(241, 249, 249);
}
.topper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin: 5px 6px;
  padding:10px 20px;
  background-color: rgb(241, 249, 249);
}
.topper div:nth-child(2){
    margin-left: -70px;
    display: flex;
    flex-direction: column;
    span:nth-child(1){
      font-size: 20px;
      font-weight: 600;
    }
    span:nth-child(2){
      font-size: 10px;
      color: rgb(71, 70, 70);
    }
}
.touxiang img{
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

.discont{
  display: flex;
  flex-direction: row;
}
.discont .ale{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 60px;
  width: 100%;
  background-color: rgb(241, 249, 249);
  text-align: center;
}
.family{
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
  // margin: 5px 6px;
  padding:0px 20px;
  :deep(.van-icon-shop-o:before){
    color:green;
    font-size: 20px;
  }
}
.vaccine{
  // margin: 5px 6px;
  padding:0px 20px;
  font-weight: 600;
}
.vaccine>van-grid{
  color: red;
}
.health{
  // margin: 5px 6px;
  padding:0px 20px;
  font-weight: 600;
  :deep(.van-icon-notes-o:before){
    color:green;
    font-size: 20px;
  }
  :deep(.van-icon-records:before){
    color:green;
    font-size: 20px;
  }
  :deep(.van-icon-user-o:before){
    color:green;
    font-size: 20px;
  }
  :deep(.van-icon-service-o:before){
    color:green;
    font-size: 20px;
  }
  :deep(.van-icon-shop-o:before){
    color:green;
    font-size: 20px;
  }
  :deep(.van-icon-newspaper-o:before){
    color:green;
    font-size: 20px;
  }
  
}
.tool{
  // margin: 5px 6px;
  padding:0px 20px;
  font-weight: 600;
  :deep(.van-icon-completed:before){
    color:green;
    font-size: 20px;
  }  :deep(.van-icon-idcard:before){
    color:green;
    font-size: 20px;
  }  :deep(.van-icon-tosend:before){
    color:green;
    font-size: 20px;
  }  :deep(.van-icon-shield-o:before){
    color:green;
    font-size: 20px;
  }  :deep(.van-icon-service-o:before){
    color:green;
    font-size: 20px;
  }
}
.custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
</style>
